﻿#{extends 'main.html' /}
#{set title:'Asignar Ruta' /}
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

<script src="@{'public/javascripts/map.js'}" type="text/javascript"></script>

<style type="text/css">
    #map_canvas {
    height: 100%
    }
</style>
<script type="text/javascript">
    $(document).ready(function(){
    initializeMapCalcularRuta();

    });
</script>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"
       background="@{'public/images/fbn.png'}">
    <tr>
        <td width="327" height="100" align="right" valign="top" class="logo"><img
                src="@{'public/images/eazyRoute.png'}"
                width="315" height="100"/></td>
        <td width="997" class="banner">&nbsp;</td>
    </tr>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="fn1">
    <tr>
        <td height="31">
            <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>

                    <td width="5%" align="left" class="textORANGE">Usuario:</td>
                    <td width="9%" align="left" class="textBLUE">cchirinos</td>
                    <td width="3%" align="left" class="textORANGE">Perfil:</td>
                    <td width="12%" align="left" class="textBLUE">Adminitrador</td>
                    <td width="11%" align="right">
                        <table width="99" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td align="center"><img src="@{'public/images/12.png'}" width="25" height="23"/></td>
                                <td align="center"><img src="@{'public/images/11.png'}" width="25" height="23"/></td>
                                <td align="center"><img src="@{'public/images/10.png'}" width="25" height="23"/></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td height="25">
            <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="10" class="fm">&nbsp;</td>
                    <td class="fm1">
                        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="menu">
                            <tr>
                                <td width="20%" align="left"><a href="@{Application.registrarEmpresa()}" class="a">Registrar
                                    Empresa</a></td>
                                <td width="20%" align="left"><a href="@{Application.calcularRuta()}" class="a">Calcular
                                    Ruta</a></td>

                            </tr>
                        </table>
                    </td>
                    <td width="10" class="fm2">&nbsp;</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td width="2" height="25" align="left" valign="top">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <a href="@{Application.goBackToPrincipal()}"><img src="@{'public/images/retornar.png'}" width="32"
                                                              height="27"/></a>
            <a href="@{Application.generateOptimizeRoute()}"><img src="@{'public/images/generar.png'}" width="32"
                                                                  height="27"/></a>

        </td>

    </tr>
    <tr>
        <td height="22" class="textBLUE">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Asignación de
            Ruta</strong></td>
    </tr>
</table>
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="c2">
    <tr>
        <td width="10" height="10" align="left" valign="top"><img src="@{'public/images/c1.png'}" width="10"
                                                                  height="10"/></td>
        <td width="99%">&nbsp;</td>
        <td width="10" align="right" valign="top"><img src="@{'public/images/c3.png'}" width="10" height="10"/></td>
    </tr>
</table>
<table width="95%" height="250" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
    <tr>
        <td width="10" height="10" align="left" class="c4">&nbsp;</td>
        <td valign="top">
            <table width="100%" border="0" cellpadding="0" cellspacing="0" class="borde">
                <tr>

                    <td height="200">

                        <p>&nbsp;</p>

                        <p class="textBLUE" align="center"><strong>Asignación</strong></p>
                        <table width="761" height="222" border="1" align="center" class="borde">

                            <tr>
                                <td width="50%">
                                    <div style="height:50%">
                                        <div class="fm1">Lista de Propietarios</div>
                                        <table>
                                            #{list items:listOfPropietaries, as:'propietary' }
                                            <tr>
                                                <td>
                                                    <input type="checkbox" name="chkPropietary" id="chkPropietary"
                                                           align="center"/>
                                                    <label for="chkPropietary"></label>
                                                </td>
                                                <td class="textBLUE"> ${propietary.razonSocial}</td>

                                            </tr>
                                            #{/list}
                                        </table>
                                    </div>
                                    <div style="height:50%">
                                        <div class="fm1">Lista de Clientes</div>
                                        <table>
                                            #{list items:listOfClients, as:'client' }
                                            <tr>
                                                <td>
                                                    <input type="checkbox" name="chkClient" id="chkClient"
                                                           align="center"/>
                                                    <label for="chkClient"></label>
                                                </td>
                                                <td class="textBLUE"> ${client.razonSocial}</td>
                                            </tr>
                                            #{/list}
                                        </table>
                                    </div>
                                </td>

                                <td width="50%">
                                    <div id="map_canvas"></div>
                                </td>


                        </table>
                        <p>&nbsp;</p>

                        <p>&nbsp;</p></td>


                </tr>


            </table>


        </td>
        <td width="10" align="right" class="c5">&nbsp;</td>
    </tr>
</table>
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="c3">
    <tr>
        <td width="10" height="10" align="left" valign="bottom"><img src="@{'public/images/c6.png'}" width="10"
                                                                     height="10"/>
        </td>
        <td width="99%">&nbsp;</td>
        <td width="10" align="right" valign="bottom"><img src="@{'public/images/c8.png'}" width="10" height="10"/></td>
    </tr>
</table>
